<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<html>
	 <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="format-detection" content="telephone=no">
        <meta charset="UTF-8">
        <meta name="description" content="Violate Responsive Admin Template">
        <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">
        <link href="<%=path %>/assets2/js/bootstrap-table.css" rel="stylesheet">
        <script src="<%=path %>/assets2/js/jquery-1.11.1.min.js"></script>
        <script src="<%=path %>/assets2/js/bootstrap-table.js"></script>
   		<script src="<%=path %>/assets2/js/locale/bootstrap-table-zh-CN.js"></script>
   		<script src="<%=path %>/assets2/js/bootstrap.min.js"></script>
    </head>
<div class="row">
	<ol class="breadcrumb">
		<li><a href="<%=path%>/index"><span
				class="glyphicon glyphicon-home"></span></a></li>
		<li class="active">商品分类管理</li>
	</ol>
</div>

<div class="panel panel-default">
	<div class="panel-heading">分类列表</div>
	<div class="panel-body">
		<form id="formSearch" class="form-horizontal">
			<input type="hidden" id="userType" name="userType" value="0">
			<div class="form-group" style="margin-top: 15px">
				<label class="control-label col-sm-2"
					for="realName">搜索</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" id="selectName" placeholder="分类名称">
				</div>
				<div class="col-sm-2" style="text-align: left;">
					<button type="button" style="margin-left: 50px" id="btn_query"
						class="btn btn-primary" onclick="serachUser()">查询</button>
				</div>
			</div>
		</form>
		<br>
		<div style="text-align: left;">
			<button type="button" class="btn btn-primary"
				onclick="addOneGC()">
				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增分类
			</button>
		</div>
		<table id="tabId" data-use-row-attr-func="true" data-reorderable-rows="true"></table>
	</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			<h4 class="modal-title" id="myModalTitle">子级分类创建</h4>
		</div>
		<div class="modal-body" id="myModalBody">
			<input type="hidden" class="form-control" id="cassifyIdParent">
			<div class="row">
				<div class="col-md-12">
					<label class="control-label col-md-2">父类名称</label>
					<div class="col-md-8">
						<input type="text" class="form-control" id="parentNameParent" readonly="readonly">
					</div>
				</div>
			</div><br>
			<div class="row">
				<div class="col-md-12">
					<label class="control-label col-md-2">分类名称</label>
					<div class="col-md-8">
						<input type="text" class="form-control" id="cassifyNameChild">
					</div>
				</div>
			</div><br>
			<div class="row">
				<div class="col-md-12">
					<button class="btn btn-sm btn-primary col-md-4 col-md-offset-4" type="button" onclick="addChildBtn()">添加</button>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
   <script type="text/javascript">
   $(function () {
	    //1.初始化Table
	    var oTable = new TableInit();
	    oTable.Init();
	    //2.初始化Button的点击事件
	    var oButtonInit = new ButtonInit();
	    oButtonInit.Init();
	});
	var TableInit = function () {
	    var oTableInit = new Object();
	    //初始化Table
	    oTableInit.Init = function () {
	        $('#tabId').bootstrapTable({
	            url: '<%=path %>/manager/getGoodsClassifyInfoList',         //请求后台的URL（*）
	            method: 'get',                      //请求方式（*）
	            toolbar: '#toolbar',                //工具按钮用哪个容器
	            striped: false,                      //是否显示行间隔色
	            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	            pagination: true,                   //是否显示分页（*）
	            sortable: false,                     //是否启用排序
	            sortOrder: "asc",                   //排序方式
	            queryParams: oTableInit.queryParams,//传递参数（*）
	            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	            pageNumber:1,                       //初始化加载第一页，默认第一页
	            pageSize: 10,                       //每页的记录行数（*）
	            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
	            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
	            strictSearch: false,
	            showColumns: false,                  //是否显示所有的列
	            showRefresh: false,                  //是否显示刷新按钮
	            minimumCountColumns: 2,             //最少允许的列数
	            clickToSelect: false,                //是否启用点击选中行
	            uniqueId: "cassifyId",                     //每一行的唯一标识，一般为主键列
	            showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
	            cardView: false,                    //是否显示详细视图
	            detailView: true,                   //是否显示父子表
	            columns: [/* {
	            	checkbox: true, // 显示一个勾选框
	                align: 'center', // 居中显示
	                
	            }, */ {
	                field: 'cassifyId',
	                title: '分类ID',
	                align: 'center', // 左右居中
	                valign: 'middle' // 上下居中
	            }, {
	                field: 'cassifyName',
	                title: '分类名称',
	                align: 'center', // 左右居中
	                valign: 'middle' // 上下居中
	            }, {
	                field: 'parentId',
	                title: '分类级别',
	                align: 'center', // 左右居中
	                valign: 'middle', // 上下居中
	                formatter: parentIdFormatter //自定义方法，添加操作按钮
	            },{
	                field: 'cassifyId',
	                title: '操作',
	                align: 'center', // 左右居中
	                valign: 'middle', // 上下居中
	                formatter: operateFormatter //自定义方法，添加操作按钮
	            }],
	            //注册加载子表的事件。注意下这里的三个参数！
                onExpandRow : function (index, row, $detail) {
                    console.log(index);
                    console.log(row);
                    $.ajax({
                        type: "post",
                        url: "<%=path %>/manager/getGoodsClassifyChildInfoList",       //子表请求的地址
                        data: {"parentId":row.cassifyId},//我这里是点击父表后，传递父表列id和nama到后台查询子表数据
                        async: false,           //很重要，这里要使用同步请求
                        success: function(data) {
                        	var html="<table class='table table-hover'>";
                        	html+="<thead>";
                            html += "<tr'>";
                            html += "<th style='text-align: center; vertical-align: middle;'>子类ID</th>";
                            html += "<th style='text-align: center; vertical-align: middle;'>子类名称</th>";
                            html += "<th style='text-align: center; vertical-align: middle;'>分类级别</th>";
                            html += "<th style='text-align: center; vertical-align: middle;'>操作</th>";
                            html += "</tr>";
                            html += "</thead><tbody>";
                            $.each(data.rows,
                                    function(n, value) {
                                        html += "<tr  align='center'>" 
                                            + "<td>" + value.cassifyId + "</td>" 
                                            + "<td>" + value.cassifyName + "</td>" 
                                            + "<td>二级分类</td>" 
                                            + "<td><a class='btn btn-default' href='#' style='color:#7CCD7C;' onclick='editGC("+value.cassifyId+",\""+value.cassifyName+"\")'>编辑</a></td>" 
                                            + "</tr>";
                            });
                        	html+="</tbody></table>";
                        	$detail.html(html)
                        }
                    });
	            },
	        });
	    };
	
	//得到查询的参数
	oTableInit.queryParams = function (params) {
	        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
	            limit: params.limit,   //页面大小
	            offset: params.offset,  //页码
	            selectName: $("#selectName").val(),
	        };
	        return temp;
	    };
	    return oTableInit;
	};
	//查询
	function serachUser() {
        $("#tabId").bootstrapTable('refresh',{pageNumber:1});
    };
	var ButtonInit = function () {
	    var oInit = new Object();
	    var postdata = {};
	    oInit.Init = function () {
	        //初始化页面上面的按钮事件
	    };
	    return oInit;
	};
	//操作判断
	function operateFormatter(value, row, index) {
		var str=''
		str='<a class="btn btn-default" href="#" style="color:	#7CCD7C;" onclick="addGCChild('+value+',\''+row.cassifyName+'\')">添加子类</a>&emsp;&emsp;'
		str+='<a class="btn btn-default" href="#" style="color:	#7CCD7C;" onclick="editGC('+value+',\''+row.cassifyName+'\')">编辑</a>'
		return str;
	};
	//判断级别
	function parentIdFormatter(value, row, index){
		var str=''
		if(value==null||value==''){
			str = '一级分类';
		}else{
			str = '二级分类';
		}
		return str;
	}
			    	
	//添加子类名称展示
	function addGCChild(cassifyIdParent,parentNameParent){
		$("#cassifyIdParent").val(cassifyIdParent);
		$("#parentNameParent").val(parentNameParent);
		$('#myModal').modal('show');
	}
	//添加子类方法
	function addChildBtn(){
		var cassifyIdParent = $("#cassifyIdParent").val();
		var parentNameParent = $("#parentNameParent").val();
		var cassifyNameChild = $("#cassifyNameChild").val();
		if(cassifyNameChild==null||cassifyNameChild==''){
			//tips层
			layer.tips('子类名称不能为空~', '#cassifyNameChild');
			return false;
		}else{
		$.ajax({
			 type:"POST",
			 data: {"cassifyId":cassifyIdParent,"parentName":parentNameParent,"cassifyName":cassifyNameChild},
	         url: "<%=path %>/manager/addTwoGoodsClassifyInfo",
	         success: function(data,status,xhr){
	        	 if(data.num==1){
	        		 swal({ 
			   			  title: "提交成功", 
			   			  text: "添加子类成功~", 
			   			  type: "success",
			   			},function(){
			        		 $("#tabId").bootstrapTable('refresh');
			        		 $('#myModal').modal('hide');
			   			});
	        	 }else{
	        		 $('#myModal').modal('hide');
	        		 swal({ 
			   			  title: "提交失败", 
			   			  text: "添加子类失败~", 
			   			  type: "error",
			   			}); 
	        	 }
	         },error:function (){
	        	 swal({ 
		   			  title: "提交失败", 
		   			  text: "网络错误,请稍后尝试~", 
		   			  type: "warning",
		   			});
	         }
		});
	  }
	};
	//添加一级分类
	function addOneGC(){
		var html = '<br><div class="col-md-12">'
		+'<label class="control-label col-md-2">分类名称</label>'
		+'<div class="col-md-8"><input type="text" class="form-control" id="cassifyNameOne">'
		+'</div></div>';
		//页面层
		layer.open({
		  type: 1,
		  title:'一级分类添加',
		  skin: 'layui-layer-rim', //加上边框
		  shadeClose:true,
		  area: ['400px', '200px'],
		  content: html,
		  btn: ['添加', '取消'],
		  btn1: function(){
			  var cassifyNameOne = $("#cassifyNameOne").val();
				if(cassifyNameOne==null||cassifyNameOne==''){
					//tips层
					layer.tips('分类名称不能为空~', '#cassifyNameOne');
					return false;
				}else{
				$.ajax({
					 type:"POST",
					 data: {"cassifyName":cassifyNameOne},
			         url: "<%=path %>/manager/addOneGoodsClassifyInfo",
			         success: function(data,status,xhr){
			        	 layer.closeAll();
			        	 if(data.num==1){
			        		 swal({ 
					   			  title: "提交成功", 
					   			  text: "添加子类成功~", 
					   			  type: "success",
					   			},function(){
					        		 $("#tabId").bootstrapTable('refresh');
					   			});
			        	 }else{
			        		 swal({ 
					   			  title: "提交失败", 
					   			  text: "添加子类失败~", 
					   			  type: "error",
					   			}); 
			        	 }
			         },error:function (){
			        	 layer.closeAll();
			        	 swal({ 
				   			  title: "提交失败", 
				   			  text: "网络错误,请稍后尝试~", 
				   			  type: "warning",
				   			});
			         }
				});
			  }
		  }
		});
	};
	//编辑一级分类
	function editGC(cassifyId,cassifyNameOld){
		var html = '<br><div class="col-md-12">'
			+'<label class="control-label col-md-4">分类现在名称</label>'
			+'<div class="col-md-8"><input type="text" class="form-control" id="cassifyNameOld"  value="'+cassifyNameOld+'" readonly="readonly">'
			+'</div></div>'
		    + '<br><br><br><div class="col-md-12">'
			+'<label class="control-label col-md-4">分类新名称</label>'
			+'<div class="col-md-8"><input type="text" class="form-control" id="cassifyNameNew">'
			+'</div></div>';
			//页面层
			layer.open({
			  type: 1,
			  title:'分类名称编辑',
			  skin: 'layui-layer-rim', //加上边框
			  shadeClose:true,
			  area: ['450px', '250px'],
			  content: html,
			  btn: ['添加', '取消'],
			  btn1: function(){
				  var cassifyNameNew = $("#cassifyNameNew").val();
					if(cassifyNameNew==null||cassifyNameNew==''){
						//tips层
						layer.tips('分类名称不能为空~', '#cassifyNameNew');
						return false;
					}else{
					$.ajax({
						 type:"POST",
						 data: {"cassifyNameNew":cassifyNameNew,"cassifyId":cassifyId},
				         url: "<%=path %>/manager/editGoodsClassifyInfo",
				         success: function(data,status,xhr){
				        	 layer.closeAll();
				        	 if(data.num==1){
				        		 swal({ 
						   			  title: "编辑成功", 
						   			  text: "编辑分类成功~", 
						   			  type: "success",
						   			},function(){
						        		 $("#tabId").bootstrapTable('refresh');
						   			});
				        	 }else{
				        		 swal({ 
						   			  title: "编辑失败", 
						   			  text: "编辑分类失败~", 
						   			  type: "error",
						   			}); 
				        	 }
				         },error:function (){
				        	 layer.closeAll();
				        	 swal({ 
					   			  title: "编辑失败", 
					   			  text: "网络错误,请稍后尝试~", 
					   			  type: "warning",
					   			});
				         }
					});
				  }
			  }
			});
	};
	
   </script>
</html>